<style>
    :root {
        --penguin-size: 300px;
        --penguin-skin: gray;
        --penguin-belly: white;
        --penguin-beak: orange;
    }

    @media (max-width: 350px) {
        :root {

            /* add code below */
            --penguin-size: 200px;
            --penguin-skin: black;
            /* add code above */

        }
    }

    .penguin {
        position: relative;
        margin: auto;
        display: block;
        margin-top: 5%;
        width: var(--penguin-size, 300px);
        height: var(--penguin-size, 300px);
    }

    .right-cheek {
        top: 15%;
        left: 35%;
        background: var(--penguin-belly, white);
        width: 60%;
        height: 70%;
        border-radius: 70% 70% 60% 60%;
    }

    .left-cheek {
        top: 15%;
        left: 5%;
        background: var(--penguin-belly, white);
        width: 60%;
        height: 70%;
        border-radius: 70% 70% 60% 60%;
    }

    .belly {
        top: 60%;
        left: 2.5%;
        background: var(--penguin-belly, white);
        width: 95%;
        height: 100%;
        border-radius: 120% 120% 100% 100%;
    }

    .penguin-top {
        top: 10%;
        left: 25%;
        background: var(--penguin-skin, gray);
        width: 50%;
        height: 45%;
        border-radius: 70% 70% 60% 60%;
    }

    .penguin-bottom {
        top: 40%;
        left: 23.5%;
        background: var(--penguin-skin, gray);
        width: 53%;
        height: 45%;
        border-radius: 70% 70% 100% 100%;
    }

    .right-hand {
        top: 5%;
        left: 25%;
        background: var(--penguin-skin, black);
        width: 30%;
        height: 60%;
        border-radius: 30% 30% 120% 30%;
        transform: rotate(130deg);
        z-index: -1;
        animation-duration: 3s;
        animation-name: wave;
        animation-iteration-count: infinite;
        transform-origin:0% 0%;
        animation-timing-function: linear;
    }

    @keyframes wave {
        10% {
            transform: rotate(110deg);
        }
        20% {
            transform: rotate(130deg);
        }
        30% {
            transform: rotate(110deg);
        }
        40% {
            transform: rotate(130deg);
        }
    }

    .left-hand {
        top: 0%;
        left: 75%;
        background: var(--penguin-skin, gray);
        width: 30%;
        height: 60%;
        border-radius: 30% 30% 30% 120%;
        transform: rotate(-45deg);
        z-index: -1;
    }

    .right-feet {
        top: 85%;
        left: 60%;
        background: var(--penguin-beak, orange);
        width: 15%;
        height: 30%;
        border-radius: 50% 50% 50% 50%;
        transform: rotate(-80deg);
        z-index: -2222;
    }

    .left-feet {
        top: 85%;
        left: 25%;
        background: var(--penguin-beak, orange);
        width: 15%;
        height: 30%;
        border-radius: 50% 50% 50% 50%;
        transform: rotate(80deg);
        z-index: -2222;
    }

    .right-eye {
        top: 45%;
        left: 60%;
        background: black;
        width: 15%;
        height: 17%;
        border-radius: 50%;
    }

    .left-eye {
        top: 45%;
        left: 25%;
        background: black;
        width: 15%;
        height: 17%;
        border-radius: 50%;
    }

    .sparkle {
        top: 25%;
        left:-23%;
        background: white;
        width: 150%;
        height: 100%;
        border-radius: 50%;
    }

    .blush-right {
        top: 65%;
        left: 15%;
        background: pink;
        width: 15%;
        height: 10%;
        border-radius: 50%;
    }

    .blush-left {
        top: 65%;
        left: 70%;
        background: pink;
        width: 15%;
        height: 10%;
        border-radius: 50%;
    }

    .beak-top {
        top: 60%;
        left: 40%;
        background: var(--penguin-beak, orange);
        width: 20%;
        height: 10%;
        border-radius: 50%;
    }

    .beak-bottom {
        top: 65%;
        left: 42%;
        background: var(--penguin-beak, orange);
        width: 16%;
        height: 10%;
        border-radius: 50%;
    }

    body {
        background:#c6faf1;
    }

    .penguin * {
        position: absolute;
    }
</style>
<div class="penguin">
    <div class="penguin-bottom">
        <div class="right-hand"></div>
        <div class="left-hand"></div>
        <div class="right-feet"></div>
        <div class="left-feet"></div>
    </div>
    <div class="penguin-top">
        <div class="right-cheek"></div>
        <div class="left-cheek"></div>
        <div class="belly"></div>
        <div class="right-eye">
            <div class="sparkle"></div>
        </div>
        <div class="left-eye">
            <div class="sparkle"></div>
        </div>
        <div class="blush-right"></div>
        <div class="blush-left"></div>
        <div class="beak-top"></div>
        <div class="beak-bottom"></div>
    </div>
</div>